<template>
	<view class="container">
		<view class="headerNav"><u-navbar title="收支明细" placeholder></u-navbar></view>
		<view class="bigNav">
			<!-- <u-tabs-swiper ref="tabs1" :list="data.list" :current="data.current" @change="tabsChange" :is-scroll="false"
				swiperWidth="100vw"></u-tabs-swiper> -->

			<z-tabs ref="tabs1" active-color="#00D075" :list="data.list" :current="data.current" @change="tabsChange" />
			<swiper :style="'height:'+ data.height+';padding:30rpx;'" :current="data.swiperCurrent"
				@transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging" v-model="dataList" @query="getSystemInfoSync" created-reload>
						<view class="one">
							<view class="newsList" v-for="(item, index) in dataList" :key="index">
								<text>{{item.content}}</text>
								<text>+{{item.points}}</text>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging :fixed="false" ref="paging2" v-model="dataList2" @query="getSystemInfoSync2"
						created-reload>
						<view class="two">
							<view class="newsList" v-for="item in dataList2" :key="item.id">
								<text>{{item.content}}</text>
								<text>-{{item.points}}</text>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</view>
		<u-modal @confirm="cancelBatch" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.dele">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;">
				<text>确定要取消收藏吗？</text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const tabs1 = ref();
	let dataList = ref([])
	let dataList2 = ref([])
	const paging = ref(null)
	const paging2 = ref(null)
	const data = reactive({
		height: null,
		list: [{
			name: '获得记录'

		}, {
			name: '消耗记录'
		}],
		// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
		current: 0, // tabs组件的current值，表示当前活动的tab选项
		swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		dele: false,
		id: null
	})


	const getSystemInfoSync = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			type: 1
		}
		let res = await uni.$u.api.pointsLog({
			params
		})
		if (res) {
			paging.value.complete(res.items)
		}
	}
	const getSystemInfoSync2 = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			type: 2
		}
		let res = await uni.$u.api.pointsLog({
			params
		})
		if (res) {
			paging2.value.complete(res.items)
		}
	}

	const deletejob = (id) => {
		data.dele = true
		data.id = id
	}

	const cancelBatch = async () => {
		let params = {
			id: data.id
		}
		if (data.swiperCurrent == 0) {
			let res = await uni.$u.api.cancelBatch(params)
			if (res) {
				paging.value.reload()
			}
		} else {
			let res = await uni.$u.api.companycancelBatch(params)
			if (res) {
				paging2.value.reload()
			}
		}

	}

	// tabs通知swiper切换
	const tabsChange = (index) => {
		data.swiperCurrent = index;
	}

	const animationfinish = (e) => {
		let current = e.detail.current;
		tabs1.value.unlockDx(current);
		data.swiperCurrent = current;
		data.current = current;
	}

	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		if (res) {
			data.height = (uni.$u.sys().windowHeight - res.height - 75) + 'px';
		}
	}


	function getMyDate(str) {
		var oDate = new Date(str),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth() + 1,
			oDay = oDate.getDate(),
			oHour = oDate.getHours(),
			oMin = oDate.getMinutes(),
			oSen = oDate.getSeconds(),
			oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
			addZero(oMin) + ':' + addZero(oSen);
		return oTime;
	}
	//补零操作
	function addZero(num) {
		if (parseInt(num) < 10) {
			num = '0' + num;
		}
		return num;
	}
	onReady(() => {
		getListHeight()
	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.bigNav {
			width: 100%;

			.newsList {

				padding: 10rpx;
				width: 100%;
				height: 120rpx;
				margin: 10rpx 0;
				font-size: 32rpx;
				color: #101010;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #BBBBBB;

				text:nth-child(2) {
					color: #00D075;
				}
			}

		}


	}

	:deep .u-dropdown {
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4) !important;
		background-color: #fff;
	}
</style>